<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <title>会议室管理系统</title>

        <!-- Icons -->
        <link rel="shortcut icon" href="assets/media/favicons/favicon.png">
        <link rel="icon" type="image/png" sizes="192x192" href="assets/media/favicons/favicon-192x192.png">
        <link rel="apple-touch-icon" sizes="180x180" href="assets/media/favicons/apple-touch-icon-180x180.png">
        <!-- END Icons -->
        <link rel="stylesheet" id="css-main" href="assets/css/oneui.min.css">
    </head>
    <body>
        <div id="page-container" class="sidebar-o sidebar-dark side-scroll page-header-fixed">
            <div class="sidebar"></div>
            <!-- Header -->
            <div class="header"></div>
            <!-- END Header -->

            <!-- Main Container -->
            <main id="main-container">
                <!-- 内容区域 -->
                <!-- Default Table -->
            <div class="block">
                <div class="block-content block-content-full">
                    <div id="DataTables_Table_3_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                        <div class="ly-row">
                            <button type="button" class="btn btn-sm btn-primary" id="add-team">添加部门</button>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <table
                                    class="table table-bordered table-striped table-vcenter js-dataTable-buttons dataTable no-footer"
                                    id="DataTables_Table_3" role="grid" aria-describedby="DataTables_Table_3_info">
                                    <thead>
                                        <tr role="row">
                                            <th class="text-center sorting_asc" style="width: 10%;" tabindex="0"
                                                aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                                aria-sort="ascending"
                                                aria-label="ID: activate to sort column descending">序号</th>
                                            <th class="sorting" style="width: 30%;" tabindex="0"
                                                aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                                aria-label="Name: activate to sort column ascending">部门名</th>
                                            <th class="d-none d-sm-table-cell sorting" style="width: 20%;" tabindex="0"
                                                aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                                aria-label="Email: activate to sort column ascending">经理</th>
                                            <th class="d-none d-sm-table-cell sorting" style="width: 30%;" tabindex="0"
                                                aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                                aria-label="Email: activate to sort column ascending">手机号</th>
                                            <th style="width: 20%;" class="sorting" tabindex="0"
                                                aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                                aria-label="Registered: activate to sort column ascending">操作
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 此处为动态生成表格 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END Default Table -->
            </main>
            <!-- END Main Container -->

            <!-- Footer -->
            <div class="footer"></div>
        </div>
        <div class="modal" id="modal-block-normal" tabindex="-1" role="dialog" aria-labelledby="modal-block-normal"
        aria-modal="true" style="display: none; padding-left: 0px;">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="block block-themed block-transparent mb-0">
                    <div class="block-header bg-primary-dark">
                        <h3 class="block-title">请输入员工信息</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                <i class="fa fa-fw fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content font-size-sm">
                        <form enctype="multipart/form-data" class="add-form">
                            <div class="row push">
                                <div class="col-lg-2">
                                </div>
                                <div class="col-lg-10 col-xl-7">
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="uName" name="uName" placeholder="姓名">
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="tel" name="tel" placeholder="手机号">
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control" id="tId" name="tId">
                                            <option value="0">请选择部门</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control" id="power" name="power">
                                            <option value="2">员工</option>
                                            <option value="1">经理</option>
                                            <option value="0">超管</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="block-content block-content-full text-right border-top">
                        <button type="button" class="btn btn-sm btn-light" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" id="add-submit">
                            <i class="fa fa-check mr-1"></i>Ok
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <script src="assets/js/oneui.core.min.js"></script>
        <script src="assets/js/oneui.app.min.js"></script>
        <script src="assets/js/public.js"></script>
        <script>
            
            $.get("http://localhost:3000/team", {
                // token: sessionStorage.getItem("token")
            }, async (res)=>{
                let str = "";
                for(let i=0;i<res.data.length;i++){
                    let uName = "无";
                    let tel = "无";
                    if(res.data[i].tLeader){
                        let data = await $.get("http://localhost:3000/user", {uId: res.data[i].tLeader});
                        uName = data.data[0].uName;
                        tel = data.data[0].tel;
                    }
                    str += `<tr>
                        <td class="d-none d-sm-table-cell font-size-sm">
                            <span class="text-muted">${ i+1 }</span>
                        </td>
                        <td class="d-none d-sm-table-cell font-size-sm">
                            <span class="text-muted">${ res.data[i].tName }</span>
                        </td>
                        <td class="d-none d-sm-table-cell font-size-sm">
                            <span class="text-muted">${ uName }</span>
                        </td>
                        <td class="d-none d-sm-table-cell font-size-sm">
                            <span class="text-muted">${ tel }</span>
                        </td>
                        <td class="d-none d-sm-table-cell font-size-sm">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-light js-tooltip-enabled set-team" data-toggle="tooltip" data-id="${res.data[i].tId}" data-original-title="Edit Client">
                                    <i class="fa fa-fw fa-pencil-alt"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-light js-tooltip-enabled del-team" data-toggle="tooltip" data-id="${res.data[i].tId}" data-original-title="Remove Client">
                                    <i class="fa fa-fw fa-times"></i>
                                </button>
                            </div>
                        </td>
                    </tr>`;
                }
                $("tbody").html(str);

                $(".set-team").click(async function(){
                    $('#modal-block-normal').modal('show');
                    // 获取当前部门信息，填充到表单中
                    state = 1;
                })
            });

            let state;

            $("#add-team").click(async function(){
                $('#modal-block-normal').modal('show');
                // 清空表单内容
                state = 0;
            })

            $("#add-submit").click(function(){
                if(state === 0){
                    console.log("调用添加部门信息的ajax请求")
                }else if(state === 1){
                    console.log("调用修改部门信息的ajax请求")
                }
            })
            
        </script>
    </body>
</html>
